<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Watch</title>
  </head>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <body>
    <h1>Hello Watch</h1>
    <hr />
    <div id="app">
      <p>{{wendu}}℃</p>
      <p>{{chuangyi}}</p>

      <p><button @click="add">升温</button></p>
      <p><button @click="sub">降温</button></p>
    </div>
  </body>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        wendu: 14,
        chuangyi: '短袖'
      },
      methods: {
        add: function () {
          this.wendu = this.wendu + 5
        },
        sub: function () {
          this.wendu = this.wendu - 5
        }
      }
      // 内部申明
      // watch: {
      // wendu: function (newVal, oldVal) {
      //   if (newVal >= 26) {
      //     this.chuangyi = '短袖'
      //   } else if (newVal < 26 && newVal >= 0) {
      //     this.chuangyi = '夹克长裙'
      //   } else {
      //     this.chuangyi = '棉袄'
      //   }
      // }
      // }
    })

    // 外部使用
    app.$watch('wendu', function (newVal, oldVal) {
      if (newVal >= 26) {
        this.chuangyi = '短袖'
      } else if (newVal < 26 && newVal >= 0) {
        this.chuangyi = '夹克长裙'
      } else {
        this.chuangyi = '棉袄'
      }
    })
  </script>
</html>
